<template>
  <div class="search">
    <van-search
      v-model="searchVal"
      show-action
      @search="onSearch"
      @cancel="onCancel"
      placeholder="请输入搜索关键词"
    >
    </van-search>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      searchVal: "",
    };
  },
  methods: {
    onCancel() {
      this.$router.push("/");
    },
    onSearch() {
      if (!this.searchVal) return;
      this.$router.replace(`/productlist?keyword=${this.searchVal}`);
    },
  },
};
</script>